<template>
    <view class="more-box" @click="hanldeClickViewMore">
        <text class="more-text" :style="{ 'color': props.color }">{{ props.title }}</text>
        <view class="more-icon">
            <uv-icon name="arrow-right" :color="props.color" :size="15"></uv-icon>
        </view>
    </view>
</template>
<script setup lang="ts">
    const props = withDefaults(defineProps<{
        title ?: string,
        color ?: string,
    }>(), {
        title: '查看更多',
        color: '#6E737D'
    });

    const emit = defineEmits(['hanldeClickViewMore']);

    const hanldeClickViewMore = () => {
        emit('hanldeClickViewMore');
    }
</script>
<style lang="scss" scoped>
    .more-box {
        display: flex;
        align-items: center;

        .more-text {
            font-size: 24rpx;
        }

        .more-icon {
            width: 30rpx;
            height: 30rpx;
            margin-top: 2rpx;
        }
    }
</style>